@tailwind base;
@tailwind components;
@tailwind utilities;

#tt-configs {
  color: var(--vscode-foreground);
}

.tt-title {
  @apply py-2 font-black border-b-2;
  border-color: var(--vscode-textSeparator-foreground);
}

.tt-input {
  @apply px-1 mt-2 pl-1 w-full rounded;
  outline: none;
  border: 1px solid var(--vscode-input-background);
  color: var(--vscode-input-foreground);
  background-color: var(--vscode-input-background);
}

.tt-input:focus {
  outline: none;
  border: 1px solid var(--vscode-focusBorder);
}

.tt-input::-webkit-input-placeholder {
  color: var(--vscode-input-placeholderForeground);
}

.tt-button {
  @apply p-1 w-5/6 block my-3 mx-auto max-w-sm rounded text-center cursor-pointer;
  color: var(--vscode-button-foreground);
  background-color: var(--vscode-button-background);
  border: 1px solid var(--vscode-button-border);
  box-shadow: var(--vscode-widget-shadow);
}

.tt-button:hover {
  color: var(--vscode-button-foreground);
  background-color: var(--vscode-button-hoverBackground); 
}
